<template>
  <div>
    <div v-for="(val, index) in items" :key="index">{{ val }}</div>
    <button @click="setItemsErr">
      改变-错误方法
    </button>
    <button @click="setItemsSuc">
      改变-正确方法
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ["a", "b", "c"]
    };
  },
  methods: {
    // 错误方法
    setItemsErr() {
      // 直接赋值
       this.items[1] = "x";
      // 直接修改长度
       this.items.length = 2;
    },
    setItemsSuc() {
      // 使用set 方法改变值
      this.$set(this.items, 1, "x");
      // 使用 数组原型中 splice 修改值
      // setTimeout(() => {
      //   this.items.splice(1, 1);
      // }, 2000);
       this.items.splice(1, 1);
    }
  }
};
</script>
